<template>
  <div>
    <div class="container">
      <div class="width:1020px">
        <span class="go-back" @click="back">返回</span>
        <span class="className">当前位置：{{name}}</span>
      </div>
      <div class="classBox">
        <ul v-for="item in classList2" :key="item">
          <li>
            <i class="el-icon-tickets icon"></i>
            <span class="classList">{{item.name}}</span>
            <span class="exsc" @click="go(item)">练习</span>
          </li>
        </ul>
      </div>
      <div class="classBox2">
        <ul v-for="item in classList" :key="item">
          <li>
            <i class="el-icon-tickets" style="float:left"></i>
            <span class="classList">{{item.name}}</span>
            <span class="exsc" @click="go2(item)">练习</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      name: "",

      classList:[
        {
          name: "口算加法",
          to: "/test"
        },
        {
          name: "随机加减",
          to: "/test2"
        },
        {
          name: "小数乘整数",
          to: "/grade4-exe3"
        },
        {
          name: "加法无法提示",
          to: "/grade4-exe4"
        }
      ],
      classList2: [
        {
          name: "口算加法",
          to: "/grade4-exe"
        },
        {
          name: "随机加减",
          to: "/grade4-exe2"
        },
        {
          name: "小数乘整数",
          to: "/grade4-exe3"
        },
        {
          name: "加法无法提示",
          to: "/grade4-exe4"
        }
      ]
    };
  },
  //    props: {
  //           classList: {
  //               type: Array,
  //             //   default: function(){
  //             //       return [];
  //             //   }
  //             default:["圆柱圆锥", "圆柱体积", "解比例", "比例尺"]
  //           },
  //       },
  computed: {},
  watch: {},
  methods: {
    go(item) {
      console.log(item);
      this.$router.push({ path: item.to, query: { name: item.name } });
    },
    go2(item) {
      console.log(item);
      this.$router.push({ path: item.to, query: { name: item.name } });
    },
    back() {
      this.$router.go(-1);
    }
  },
  created() {
    this.name = this.$route.query.name;
  }
};
</script>
<style lang='scss' scoped>
.go-back {
  font-size: 25px;
}
li {
  list-style-type: none;
  height: 31px;
  line-height: 31px;
  // padding: 10px;
}
.container {
  margin: 0 auto;
  width: 1020px;
}
.className {
  font-size: 24px;
  font-family: "微软雅黑";
  text-align: center;
}
.webName {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
.classBox {
  float: left;
  width: 497px;
  border: 4px solid yellow;
  border-radius: 8px;
}
.classBox2 {
  float: right;
  width: 497px;
  border: 4px solid yellow;
  border-radius: 8px;
}
.classList {
  float: left;
}
.exsc {
  float: right;
  text-align: center;
  width: 88px;
  height: 31px;
  line-height: 31px;
  background: #e77200;
  border-radius: 20px;
  cursor: pointer;
}
.el-icon-tickets {
  float: left;
  margin-top: 6px;
}
</style>